<template>
	<view>
		<view>
			<view class="search-top">
				<view class="top-1">
					<u-icon name="close" size="24"></u-icon>
				</view>
				<view class="top-2">
					<u-search placeholder="请输入搜索的内容" v-model="keyword" @custom="search(keyword)"></u-search>
				</view>
			</view>
		</view>
		<view class="hot-container">
			<view class="hot-title">
				<text>最近搜索</text>
				<u-icon name="trash" size="28" @tap="clearHistory"></u-icon>
			</view>
			<view class="hot-main">
				<view class="hot-item" v-for="(item,index) in rectwordList" :key="index">
					<text>{{item}}</text>
				</view>
			</view>
		</view>
		<view class="hot-container">
			<view class="hot-title">
				<text>热门搜索</text>
			</view>
			<view class="hot-main">
				<view class="hot-item" v-for="(item,index) in hotwordList" :key="index" @click="search(item.title)">
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {removeDub} from '@/utils/ary.js'
	export default {
		data() {
			return {
				hotwordList: [],
				rectwordList: JSON.parse(uni.getStorageSync("rectwordList") || '[]'),
				keyword:''
			}
		},
		methods: {
			async getHotkeywords() {
				const result = await uni.$api.homeModules.gethotwordsApi()
				this.hotwordList = result.data.data
			},
			search(keyword) {
				this.rectwordList.push(keyword)
				let newAry=removeDub(this.rectwordList)
				this.rectwordList=newAry;
				uni.setStorageSync("rectwordList", JSON.stringify(newAry))
				//跳转到商品列表页
				uni.navigateTo({
					url:`/goodsPck/productList/productList?keyword=${keyword}`
				})
			},
			clearHistory(){
				uni.removeStorageSync("rectwordList")
				this.rectwordList=[]
			}
		},
		onLoad() {
			this.getHotkeywords()
		}
	}
</script>

<style lang="scss">
	.search-top {
		width: 750rpx;
		height: 100rpx;
		background-color: #ccc;
		display: flex;
		align-items: center;

		.top-1 {
			margin: 0 20rpx;
		}

		.top-2 {
			flex: 1;
		}
	}

	.hot-container {
		.hot-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx;
		}

		.hot-main {
			display: flex;
			flex-wrap: wrap;
			// justify-content:space-around;
			padding: 10rpx;

			.hot-item {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 200rpx;
				height: 64rpx;
				border: 2rpx solid #ccc;
				border-radius: 32rpx;
				margin: 10rpx;
				color: #999;
				font-size: 26rpx;
			}

		}

	}
</style>